<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
二手车管理系统<br/>
车名：<input type="text" name="name">

车辆：<select name="categoryId">
    <option value="">全部</option>
</select>
<button th:onclick="query()" id="query">查询</button>

<button th:onclick="add()" id="add">新增二手车辆信息</button>
<h1>电子文档列表</h1>
<table border="1">
    <tr>
        <td>车名</td>
        <td>车价（元）</td>
        <td>里程</td>
        <td>购车时间</td>
        <td>车型</td>
        <td>车辆状态</td>
        <td>操作</td>
    </tr>
    <tr th:each="list : ${list}">
        <td>[[${list.carname}]]</td>
        <td>[[${list.carprice}]]</td>
        <td>[[${list.carmileage}]]</td>
        <td th:text="${#dates.format(list.carbuytime,'yyyy-MM-dd')}"></td>
        <td>
            <span th:if="${list.cartype==1}">轿车</span>
            <span th:if="${list.cartype==2}">SUV</span>
            <span th:if="${list.cartype==3}">MPV</span>
            <span th:if="${list.cartype==4}">跑车</span>
            <span th:if="${list.cartype==5}">皮卡</span>
        </td>
        <td>
            <span th:if="${list.carstatus==1}">在售</span>
            <span th:if="${list.carstatus==0}">已售</span>
        </td>
        <td>
            <a href="javascript:void(0)" th:onclick="|update(${list.carid})|">修改</a>
            <a href="javascript:void(0)" th:onclick="|del(${list.carid})|">删除</a>
        </td>
    </tr>

</table>
<p>
    <a th:href="@{/list(startIndex=1)}">首页</a>
    <a th:href="@{/list(startIndex=${startIndex}-1)}">上一页</a>
    <a th:href="@{/list(startIndex=${startIndex}+1)}">下一页</a>
    <a th:href="@{/list(statrtIndex=${pageCount})}">尾页</a>
    <span>第[[${startIndex}]]页/共[[${pageCount}]]页</span>
</p>
</body>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:inline="javascript">
    var contextPath = ""+[[${#request.contextPath}]];
    $(function () {
        category();
    })

    function category() {

        $.get(contextPath+'/categoryList', function (data) {
            let list = data;
            let selectElement = $("select[name='categoryId']");
            let categoryId = [[${categoryId}]];

            for (let i = 0; i < list.length; i++) {
                let selected = (categoryId === list[i].id) ? 'selected' : '';
                selectElement.append(`<option ${selected} value="${list[i].tid}">${list[i].name}</option>`);
            }
        },'json');
    }

    function query() {
        let name = $("input[name='name']").val();
        let categoryId = $("select[name='categoryId']").val();
        location.href=contextPath+"/list?categoryId=" + categoryId + "&name=" + name
    }

    function add(){
        location.href=contextPath+'/add';
    }

    function update(id){
        location.href=contextPath+'/selectById?id='+id;
    }

    function del(id){
        if(confirm("确定要删除吗？")){
            location.href=contextPath+'/delete?id='+id;
        }
    }
</script>
</html>
